<!--菜单7：
建筑能耗分析模块-->
<template>
    <el-row class="EnergyAnalysis_row">
        <LayoutLeft :title="leftTitles[values1 - 1]">
            <div class="EnergyAnalysis-container" v-show="values1===1">
                <div class="EnergyAnalysis-container-left">
                    <div class="EnergyAnalysis-container-left-head">汝阳县人民医院总电量同期对比图</div>
                    <div class="content">
                        <div id="energy-analysis-chart-1" class="EnergyAnalysis-container-left-body">
                            柱形图
                        </div>
                        <div class="EnergyAnalysis-container-left-tab">
                            <table border="1">
                                <tr>
                                    <td></td>
                                    <td v-text="JZNH_list_data[0].first_time"></td>
                                    <td v-text="JZNH_list_data[0].second_time"></td>
                                </tr>
                                <tr>
                                    <td>总电量</td>
                                    <td v-text="JZNH_list_data[0].first_data"></td>
                                    <td v-text="JZNH_list_data[0].second_data"></td>
                                </tr>
                                <tr>
                                    <td>同比变化</td>
                                    <td colspan="2" v-text="JZNH_list_data[0].change"></td>

                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="EnergyAnalysis-container-right">
                    <div class="EnergyAnalysis-container-right-head">汝阳县人民医院总电量环期对比图</div>
                    <div class="content">
                        <div id="energy-analysis-chart-2" class="EnergyAnalysis-container-right-body">
                            柱形图
                        </div>
                        <div class="EnergyAnalysis-container-right-tab">
                            <table border="1">
                                <tr>
                                    <td></td>
                                    <td v-text="JZNH_list_data[1].first_time"></td>
                                    <td v-text="JZNH_list_data[1].second_time"></td>
                                </tr>
                                <tr>
                                    <td>总电量</td>
                                    <td v-text="JZNH_list_data[1].first_data"></td>
                                    <td v-text="JZNH_list_data[1].second_data"></td>
                                </tr>
                                <tr>
                                    <td>环比变化</td>
                                    <td colspan="2" v-text="JZNH_list_data[1].change"></td>

                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!--能耗年度月对比页面-->
            <div class="EnergyAnalysis-container" v-show="values1===2">
                <div style="height: 100%">
                    <div id="energy-analysis-chart-3" class="chart">
                        柱形图
                    </div>
                </div>
            </div>
            <!--区域部门对比页面-->
            <div class="EnergyAnalysis-container" v-show="values1===3">
                <div id="energy-analysis-chart-4" class="chart">
                    柱形图
                </div>
            </div>
        </LayoutLeft>
        <LayoutRight :title="rightTitles[values1 - 1]">
            <div class="EnergyAnalysis-right-container">
                <!--              <br>-->
                <div class="EnergyAnalysis-right-default" v-if="values1==1">&nbsp;&nbsp;&nbsp;选择对象 :</div>
                <div class="EnergyAnalysis-right-select" v-if="values1==1">
                    <select style="height: 35px;width: 100%" v-model="op1_value">
                        <option value="1">汝阳县人民医院</option>
                        <option value="2">汝阳县人民公园</option>
                        <option value="3">汝阳县人民医院</option>
                    </select>
                </div>
                <div class="EnergyAnalysis-right-default" v-if="values1==1 || values1==3">&nbsp;&nbsp;&nbsp;日期 :
                </div>
                <div class="EnergyAnalysis-right-block" v-if="values1==1 || values1==3">
                    <el-date-picker
                        v-model="value1"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </div>
                <div class="EnergyAnalysis-right-default" v-if="values1==2">&nbsp;对比日期 :</div>
                <div class="EnergyAnalysis-right-default" v-if="values1==2">
                    <select style="width: 98%;height: 30px" v-model="op2_value">
                        <option value="1">请选择对比日期</option>
                        <option value="2">2021</option>
                        <option value="3">2020</option>
                    </select>
                </div>
                <div class="EnergyAnalysis-right-default" v-if="values1==3">&nbsp;对比对象</div>
                <div class="EnergyAnalysis-right-default" v-if="values1==3">
                    <select style="width: 98%;height: 30px" v-model="op3_value">
                        <option value="1">请选择对比对象</option>
                        <option value="2">人民公园</option>
                        <option value="3">人民广场</option>
                    </select>
                </div>
                <div class="EnergyAnalysis-right-default">&nbsp;分类分别 :</div>
                <div class="EnergyAnalysis-right-default">
                    <select style="width: 98%;height: 30px" v-model="op4_value">
                        <option value="1">总电量</option>
                        <option value="2">月电量</option>
                        <option value="3">年电量</option>
                    </select>
                </div>
                <div class="EnergyAnalysis-right-default">&nbsp;是否显示对比 :</div>
                <div class="EnergyAnalysis-right-default">
                    <select style="width: 98%;height: 30px" v-model="op5_value">
                        <option value="1">否</option>
                        <option value="2">是</option>
                    </select>
                </div>
                <div class="EnergyAnalysis-right-default">&nbsp;总类型 :</div>
                <div class="EnergyAnalysis-right-default">
                    <select style="width: 98%;height: 30px" v-model="op6_value">
                        <option value="1">总电</option>
                        <option value="2">月电</option>
                        <option value="3">年电</option>
                    </select>
                </div>
            </div>
            <LayoutCard>
                <div class="EnergyAnalysis-container-right-link">
                    <img src="../../assets/img/icon1.png">
                    <a href="javascript:" v-on:click="change(1)">同期环期电量对比</a>
                </div>
                <div class="EnergyAnalysis-container-right-link">
                    <img src="../../assets/img/icon1.png">
                    <a href="javascript:" v-on:click="change(2)">年度月度电量对比</a>
                </div>
                <div class="EnergyAnalysis-container-right-link">
                    <img src="../../assets/img/icon1.png">
                    <a href="javascript:" v-on:click="change(3)">区域部门对比</a>
                </div>
            </LayoutCard>
        </LayoutRight>
    </el-row>
</template>
<script>

import LayoutRight from "@/components/Layout/LayoutRight";
import LayoutLeft from "@/components/Layout/LayoutLeft";
import LayoutCard from "@/components/Layout/LayoutCard";

export default {
    components: {LayoutCard, LayoutLeft, LayoutRight},
    data() {
        return {

            JZNH_list_data: [{
                first_time: '@date(yyyy年MM月)',
                second_time: '@date(yyyy年MM月)',
                first_data: '@integer(40000,70000)',
                second_data: '@integer(40000,70000)',
                change: '@float(0,50)'
            },
                {
                    first_time: '@date(yyyy年MM月)',
                    second_time: '@date(yyyy年MM月)',
                    first_data: '@integer(40000,70000)',
                    second_data: '@integer(40000,70000)',
                    change: '@float(0,10)'
                }],
            op1_value: 1,
            op2_value: 1,
            op3_value: 1,
            op4_value: 1,
            op5_value: 1,
            op6_value: 1,
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            value1: '',
            values1: 1,
            chartShow: 1,
            barChart1: {
                title: '2021年1月总电量(计量单位：千瓦时)',
                data: [132, 133],
            },
            barChart2: {
                title: '2021年2月总电量(计量单位：千瓦时)',
                data: [192, 157],
            },
            barChart3: {
                title: '2021年3月总电量(计量单位：千瓦时)',
                data: [
                    [132, 123, 138, 184, 132, 123, 138, 184, 132, 123, 138, 184, 132, 123, 138, 184, 132, 123, 138],
                    [132, 123, 138, 184, 132, 123, 138, 184, 132, 123, 138, 184, 132, 123, 138, 184, 132, 123, 138],
                ],
            },
            barChart4: {
                title: '2021年3月总电量(计量单位：千瓦时)',
                data: [
                    [132, 123, 138, 184, 132, 123, 138, 184, 132, 123, 138, 184, 132, 123, 138, 184, 132, 123, 138]
                ],
            },
        };
    },
    beforeMount() {
        // 初始化局部变量
        this.rightTitles = ['建筑能耗同期对比', '年度能耗电量对比', '区域部门用电量对比'];
        this.leftTitles = [null, '汝阳县人民医院总电量对比图', '总电量部门对比图']
        this.charts = [];

        // 初始化数据
        this.initDataList().then(() => {
            this.drawBarChart1()
            this.drawBarChart2()
        }).catch(err => console.log(err));
    },
    beforeUpdate() {
        if(this.values1 !== this.chartShow) {
            while (this.charts.length > 0) {
                const chart = this.charts.pop();
                chart.clear();
            }
        }
    },
    updated() {
        if (this.values1 === 1 && this.chartShow !== 1) {
            this.drawBarChart1()
            this.drawBarChart2()
            this.chartShow = 1;
        } else if (this.values1 === 2 && this.chartShow !== 2) {
            this.drawBarChart3();
            this.chartShow = 2;
        } else if (this.values1 === 3 && this.chartShow !== 3) {
            this.drawBarChart4();
            this.chartShow = 3;
        }
    },
    methods: {
        change(x) {
            this.values1 = x;
        },
        async initDataList() {
            const resp = await this.axios.get('/api/module7/JZNH_data');
            this.JZNH_list_data = resp.data.list;
        },

        drawBarChart1() {
            const chart = this.echarts.init(document.getElementById('energy-analysis-chart-1'));
            chart.setOption({
                title: {
                    text: this.barChart1.title,
                    x: 'center',
                    y: 'top',
                },
                tooltip: {},
                xAxis: {
                    data: ['一月', '二月']
                },
                yAxis: {},
                grid: {
                    x: 40,
                    x2: 20,
                    y2: 20,
                },
                series: [{
                    name: '用电量1',
                    type: 'bar',
                    data: [
                        {value: this.barChart1.data[0], itemStyle: {color: 'green'}},
                        {value: this.barChart1.data[1], itemStyle: {color: 'black'}}
                    ],
                    barMaxWidth: 100
                }]
            })
            this.charts.push(chart);
        },
        drawBarChart2() {
            const chart = this.echarts.init(document.getElementById('energy-analysis-chart-2'));
            chart.setOption({
                title: {
                    text: this.barChart2.title,
                    x: 'center',
                    y: 'top',
                },
                tooltip: {},
                xAxis: {
                    data: ['一月', '二月']
                },
                yAxis: {},
                grid: {
                    x: 40,
                    x2: 20,
                    y2: 20,
                },
                series: [{
                    name: '用电量1',
                    type: 'bar',
                    data: [
                        {value: this.barChart2.data[0], itemStyle: {color: 'green'}},
                        {value: this.barChart2.data[1], itemStyle: {color: 'black'}}
                    ],
                    barMaxWidth: 100
                }]
            })
            this.charts.push(chart);
        },
        drawBarChart3() {
            const chart = this.echarts.init(document.getElementById('energy-analysis-chart-3'));
            chart.setOption({
                color: ['#2194EF', '#009933'],
                title: {
                    text: this.barChart3.title,
                    x: 'center',
                    y: 'top',
                },
                legend: {
                    type: 'scroll',
                    selectedMode: false,
                    x: 'center',
                    y: 'top',
                    padding: 30
                },
                tooltip: {},
                xAxis: {
                    data: Array.from({length: 12}, (v, k) => (k + 1) + '月')
                },
                yAxis: {
                    // minInterval: 5000,
                    // interval: 5000
                },
                grid: {
                    x: 50,
                    y: 90,
                    x2: 30,
                    y2: 20,
                },
                series: [{
                    name: '2020年',
                    type: 'bar',
                    data: this.barChart3.data[0]
                }, {
                    name: '2021年',
                    type: 'bar',
                    data: this.barChart3.data[1]
                }]
            })
            this.charts.push(chart);
        },
        drawBarChart4() {
            const chart = this.echarts.init(document.getElementById('energy-analysis-chart-4'));
            chart.setOption({
                color: ['#2194EF'],
                title: {
                    text: this.barChart3.title,
                    x: 'center',
                    y: 'top',
                },
                legend: {
                    type: 'scroll',
                    selectedMode: false,
                    x: 'center',
                    y: 'top',
                    padding: 30
                },
                tooltip: {},
                xAxis: {
                    data: Array.from({length: 31}, (v, k) => (k + 1) + '日')
                },
                yAxis: {
                    // minInterval: 5000,
                    // interval: 5000
                },
                grid: {
                    x: 50,
                    y: 90,
                    x2: 30,
                    y2: 20,
                },
                series: [{
                    name: '汝阳市人民医院',
                    type: 'bar',
                    data: this.barChart4.data[0]
                }]
            })
            this.charts.push(chart);
        },
    }
};

</script>
<style scoped>

.EnergyAnalysis_row {
    /*margin-bottom: 20px;*/
    padding: 0px;
    margin: 0px;
    height: 100%;
    width: 100%;
}

.EnergyAnalysis-container {
    height: 100%;
    width: 100%;
}

.EnergyAnalysis-right-container {
    flex: 1;
    box-sizing: border-box;
    margin: 0 0.5em;
}


.EnergyAnalysis-right-default {
    color: #999999;
    margin-top: 10px;
}

.EnergyAnalysis-right-select select {
    text-align: center;
    text-align-last: center;
    color: black;
}

select {
    border-color: #DCDFE6;

}
.EnergyAnalysis-container-left {
    width: 50%;
    height: 100%;
    float: left;
    border-right: 1px solid #DCDFE6;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.EnergyAnalysis-container-right {
    width: 50%;
    float: left;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.EnergyAnalysis-container-left-head {
    color: #25A0D9;
    text-align: center;
    border-bottom: 1px solid #DCDFE6;
}

.EnergyAnalysis-container-right-head {
    color: #25A0D9;
    text-align: center;
    border-bottom: 1px solid #DCDFE6;
}

.EnergyAnalysis-container-right-body {
    width: 100%;
    height: 550px;
    text-align: center;
    flex: 1;
}

.EnergyAnalysis-container-left-body {
    width: 100%;
    height: 550px;
    text-align: center;
    flex: 1;
}

.EnergyAnalysis-container-right-tab {
    text-align: center;
}

.EnergyAnalysis-container-left-tab {
    text-align: center;
}

.EnergyAnalysis-container-left-tab table {
    width: 60%;
    margin: auto;
    /*height: 150px;*/
    border: 1px solid #999999;
    border-collapse: collapse;
}

.EnergyAnalysis-container-right-tab table {
    width: 60%;
    /*height: 150px;*/
    margin: auto;
    border: 1px solid #999999;
    border-collapse: collapse;
}

.EnergyAnalysis-container-right-link {
    color: #999999;
    font-size: 20px;
    height: 40px;
    line-height: 40px;
    margin: 5px;
}

.EnergyAnalysis-container-right-link img {
    width: 50px;
    height: 35px;
}

.EnergyAnalysis-container-right-link a {
    text-decoration: none;
    font-size: 22px;
}

.EnergyAnalysis-container-right-link a:hover {
    background-color: #999999;
}
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content table {
    margin: 1em auto;
}

.chart {
    height: 100%;
}
</style>
